<template>
<div class="bell-container">
  <svg class="bell-icon" @click="NoticeDialog" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C10.8954 2 10 2.89543 10 4V4.28988C7.10851 5.15043 5 7.82898 5 11V17L3 19V20H21V19L19 17V11C19 7.82898 16.8915 5.15043 14 4.28988V4C14 2.89543 13.1046 2 12 2Z" fill="#333"/>
  </svg>
  <div class="notification-badge" v-if="noticeList.length>0">{{ noticeList.length }}</div>
  <Dialog
    v-model:visible="visible"
    :title="title"
    @close="() => NoticeDialog(false)"
  >
  <ul>
    <li v-for="(item, index) in noticeList">
      <div class="created-time">{{ formatDate(item.created_time) }} 发布</div>
      <div class="title">
        <h2>{{ item.title }}</h2>
      </div>
      <article>
        <p v-for="(item1, index1) in item.content.split('\\n')">
          {{
            index1 + 1
          }}. 
          {{
            item1
          }}
        </p>
      </article>
    </li>
  </ul>
    <template #footer>
      <button @click="() => NoticeDialog(false)">确定</button>
    </template>
  </Dialog>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import Dialog from '../dialog/index.vue';
const noticeList = ref([]);
const title = ref('WMap 地图通知');
const visible = ref(false);
const getNotices = async() => {
	const res = await fetch(`http://1.95.157.217/api/map/getNotices`, {
		method: 'GET'
	}).then(response => {
		if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
		}
		return response.json();
})
	if (res.code === 0) {
		noticeList.value = res.data;
	}
}
const NoticeDialog = (status = true) => {
  visible.value = status
}
const handleConfirm = () => {
  NoticeDialog();
}
const formatDate = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
}
onMounted(async() => {
  await getNotices()
})
</script>
<style scoped>
.bell-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.bell-icon {
  width: 24px;
  height: 24px;
  animation: ring 2s infinite;
  transform-origin: top center;
  position: relative;
  right: 8px;
  top: 8px;
}

.notification-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #FF5252;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

@keyframes ring {
  0% { transform: rotate(0deg); }
  5% { transform: rotate(15deg); }
  10% { transform: rotate(-15deg); }
  15% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  25% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

button {
  background-color: dodgerblue;
  color: white;
  width: 100px;
  height: 32px;
  border:0;
  font-size: 16px;			
  border-radius: 30px;
  cursor: pointer;
}
ul {
  height: 500px;
  overflow: auto;
  li {
    .title {
      display: flex;
      align-items: center;
      h2 {
        font-size: 21px;
      }
    }
    p {
      text-indent: 1em;
    }
    .created-time {
      text-align: right;
      font-size: 13px;
    }
    &:not(:last-child) {
      margin-bottom: 20px
    }
  }
}
</style>